<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>不要轻易相信自己的眼睛</title>
    <style>
        * {
            transform-style: preserve-3d;
        }

        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(315deg, #0d0a0b 0%, #004942 74%);
            background: radial-gradient(circle at 50% 25%, #004942, #02111c);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        body:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: repeating-conic-gradient(
                    #0003 0%, #fff0 0.00033%, #fff0 0.00066%, #fff0 0.00099%
            ), repeating-conic-gradient(
                    #fff2 0%, #fff0 0.0005%, #fff0 0.0015%, #fff0 0.019%
            );
            filter: blur(1px);
        }

        .content {
            width: 90vmin;
            height: 60vmin;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            perspective: 1500vmin;
            perspective-origin: center;
            filter: drop-shadow(-8vmin 12vmin 2vmin #0002);
        }

        .shape {
            transform: rotateX(-35deg) rotateY(-45deg);
            transition: all 2s ease-in-out 0s;
            animation: move 1.95s ease-in-out 0s 2 alternate;
            position: relative;
            top: -15vmin;
        }

        @keyframes move {
            0% {
                transform: rotateX(-35deg) rotateY(-45deg);
            }
            100% {
                transform: rotateX(-20deg) rotateY(-125deg) translateZ(-22vmin) translateY(5vmin);
            }
        }

        .content:hover .shape {
            transform: rotateX(-20deg) rotateY(-125deg) translateZ(-22vmin) translateY(5vmin);
            transition: all 2s ease-in-out 0s;
        }

        .content:hover .shape .cube .side:nth-of-type(2) {
            background: hsl(var(--hue), var(--sat), 80%);
        }

        .content:hover .shape .cube .side:nth-of-type(3) {
            background: hsl(var(--hue), var(--sat), 30%);
        }

        .cube {
            --width: 10;
            --height: 10;
            --depth: 10;
            height: calc(var(--height) * 1vmin);
            width: calc(var(--width) * 1vmin);
            --hue: 150;
            --sat: 25%;
            position: absolute;
        }

        .side {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        .side:before, .side:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: repeating-conic-gradient(
                    #0003 0%, #fff0 0.0003%, #fff0 0.0006%, #fff0 0.00099%
            ), repeating-conic-gradient(
                    #fff2 0%, #fff0 0.0005%, #fff0 0.0015%, #fff0 0.019%
            );
            background-size: 102% 102%;
            filter: blur(0.5px);
        }

        .side:after {
            filter: blur(2px);
        }

        @keyframes light {
            0% {
                background: hsl(var(--hue), var(--sat), 40%);
            }
            100% {
                background: hsl(var(--hue), var(--sat), 80%);
            }
        }

        .side:nth-of-type(1) {
            transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
            background: hsl(var(--hue), var(--sat), 40%);
        }

        .side:nth-of-type(2) {
            transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
            background: hsl(var(--hue), var(--sat), 30%);
            animation: light 1.95s ease-in 0s 2 alternate;
            transition: all 1.95s ease-in 0s;
        }

        .side:nth-of-type(3) {
            width: calc(var(--depth) * 1vmin);
            transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
            background: hsl(var(--hue), var(--sat), 80%);
            animation: light 1.95s ease-in 0s 2 alternate-reverse;
            transition: all 1.95s ease-in 0s;
        }

        .side:nth-of-type(4) {
            width: calc(var(--depth) * 1vmin);
            transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
            background: hsl(var(--hue), var(--sat), 70%);
        }

        .side:nth-of-type(5) {
            height: calc(var(--depth) * 1vmin);
            transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
            background: hsl(var(--hue), var(--sat), 60%);
        }

        .side:nth-of-type(6) {
            height: calc(var(--depth) * 1vmin);
            transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
            background: hsl(var(--hue), var(--sat), 60%);
        }

        .step1 {
            transform: translate3d(-22vmin, 0vmin, 0vmin);
            --width: 22;
        }

        .step2 {
            transform: translate3d(-22vmin, 9.95vmin, 0vmin);
            --height: 12;
        }

        .step3 {
            transform: translate3d(5vmin, 0vmin, 0vmin);
            --width: 22;
        }

        .step4 {
            transform: translate3d(17vmin, 0vmin, 10.85vmin);
            --depth: 12;
        }

        .step5 {
            transform: translate3d(17vmin, 0vmin, 32vmin);
            --depth: 22;
        }

        .step6 {
            transform: translate3d(17vmin, -11.85vmin, 38vmin);
            --height: 12;
        }

        .step3 .side:nth-of-type(1) {
            width: 53%;
            left: 26%;
        }

        .step4 .side:nth-of-type(2) {
            display: none;
        }

        .step5 .side:nth-of-type(5) {
            background: linear-gradient(
                    180deg, hsl(var(--hue), var(--sat), 60%) 0 55%, #fff0 0 100%
            );
        }

        .step6 .side:nth-of-type(6) {
            display: none;
        }

        .step6 .side:nth-of-type(5) {
            clip-path: polygon(0 100%, 0 55%, 52% 55%, 52% 0, 100% 0, 100% 100%);
        }

        .step6 .side:nth-of-type(4) {
            clip-path: polygon(0 100%, 0 50%, 55% 55%, 55% 0, 100% 0, 100% 100%);
        }

        .step6 .side:nth-of-type(2) {
            clip-path: polygon(0 0, 47% 0, 47% 50%, 100% 50%, 100% 100%, 0 100%);
        }</style>
</head>
<body>
<div class="content">
    <div class="shape">
        <div class="cube step1">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
        <div class="cube step2">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
        <div class="cube step3">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
        <div class="cube step4">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
        <div class="cube step5">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
        <div class="cube step6">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
    </div>
</div>
</body>
</html>